<template>
  <el-popover placement="bottom" width="300" v-model="isSearchPopShow" popper-class="searchPop" trigger="focus">
    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" size="mini" slot="reference" @input="inputSearch" @keyup.enter.native="onSubmit" v-model="searchInput">
    </el-input>
    <!-- 搜索历史不想做了，做的话可以将搜索历史存到localstorage中 -->
    <!-- 热搜榜 -->
    <div class="hotSearch" v-if="!searchSuggestList.songs">
      <div class="hotSearchTitle">热搜榜</div>
      <div class="hotSearchItem" v-for="(item, index) in hotSearchList" :key="index" @click="clickHotSearchItem(item.searchWord)">
        <div class="hotSearchIndex" :class="index < 3 ? 'topThree' : ''">
          {{ index + 1 }}
        </div>
        <div class="hotSearchInfo">
          <div class="hotSearchWord" :class="index < 3 ? 'hotSearchWordTopThree' : ''">
            {{ item.searchWord }}
          </div>
          <div class="hotSearchContent">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <!-- 搜索建议 -->
    <div class="searchSuggest">
      <div class="hotSearchTitle" v-if="searchSuggestList.songs">
        搜索建议
      </div>
      <!-- 单曲 -->
      <div class="searchSuggestItem" v-if="
                searchSuggestList.songs && searchSuggestList.songs.length != 0
              ">
        <div class="searchSuggestItemTitle">
          <i class="iconfont icon-yinle"></i> 单曲
        </div>
        <div class="suggestItemDetail" v-for="(item, index) in searchSuggestList.songs" :key="index" @click="clickSuggestSong(item.id)">
          {{ item.name + " - " + item.artists[0].name }}
        </div>
      </div>
      <!-- 歌手 -->
      <div class="searchSuggestItem" v-if="
                searchSuggestList.artists &&
                searchSuggestList.artists.length != 0
              ">
        <div class="searchSuggestItemTitle">
          <i class="iconfont icon-mic"></i> 歌手
        </div>
        <div class="suggestItemDetail" v-for="(item, index) in searchSuggestList.artists" :key="index" @click="clickSuggestSinger(item.id)">
          {{ item.name }}
        </div>
      </div>
      <!-- 专辑 -->
      <div class="searchSuggestItem" v-if="
                searchSuggestList.albums && searchSuggestList.albums.length != 0
              ">
        <div class="searchSuggestItemTitle">
          <i class="iconfont icon-more"></i> 专辑
        </div>
        <div class="suggestItemDetail" v-for="(item, index) in searchSuggestList.albums" :key="index" @click="clickSuggestAlbum(item.id)">
          {{ item.name + " - " + item.artist.name }}
        </div>
      </div>
      <!-- 歌单 -->
      <div class="searchSuggestItem" v-if="
                searchSuggestList.playlists &&
                searchSuggestList.playlists.length != 0
              ">
        <div class="searchSuggestItemTitle">
          <i class="iconfont icon-gedan"></i> 歌单
        </div>
        <div class="suggestItemDetail" v-for="(item, index) in searchSuggestList.playlists" :key="index" @click="clickSuggestMusicList(item.id)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- <img src="~assets/img/searh.png" alt="" /> -->
  </el-popover>
</template>

<script>
import { reqHotSearch } from '@/network/api'
import { handleMusicTime } from '@/plugins/utils'
import { reactive, toRefs } from 'vue'
export default {
  name: 'Search',

  setup() {
    const data = reactive({
      isPopoverShow: false,
      // 是否显示searchPop
      isSearchPopShow: false,
      // 热搜列表数据
      hotSearchList: [],
      // 需要搜索的内容
      searchInput: '',
      // 搜索建议列表
      searchSuggestList: {}
    })
    // 根据id获取歌曲详情
    const getMusicInfo = async ids => {
      let res = await this.$request('/song/detail', { ids })
      console.log(res)
      // 处理时间
      res.data.songs[0].dt = handleMusicTime(res.data.songs[0].dt)
      return res.data.songs[0]
    }

    // 获取搜索建议
    const getSearchSuggest = async keywords => {
      let res = await reqSearchSuggest(keywords)

      this.searchSuggestList = res.data.result
    }
    // 获取热搜列表
    const getHotSearch = async () => {
      let res = await reqHotSearch()
      // console.log(res);
      this.hotSearchList = res.data.data
    }
    // 在搜索框中输入的回调
    const inputSearch = e => {
      // console.log(e);
      clearTimeout(timer)
      if (e != '') {
        timer = setTimeout(() => {
          this.getSearchSuggest(e)
        }, 500)
      } else {
        // 清空searchSuggestList
        this.searchSuggestList = {}
        return
      }
    }
    // 在输入框按下回车的回调
    const onSubmit = e => {
      if (e.keyCode == 13 && this.searchInput != '') {
        this.goSearch()
      }
    }
    // 跳转至搜索详情页面
    const goSearch = () => {
      this.isSearchPopShow = false
      this.$router.push({ name: 'search', params: { id: this.searchInput } })
    }
    // 点击热搜榜item的回调
    const clickHotSearchItem = searchWord => {
      this.searchInput = searchWord
      this.goSearch()
    }
    // 点击搜索建议中专辑的回调
    const clickSuggestAlbum = id => {
      this.$router.push({ name: 'album', params: { id } })
      this.isSearchPopShow = false
    }
    // 点击搜索建议中歌手的回调
    const clickSuggestSinger = id => {
      this.$router.push({ name: 'singerDetail', params: { id } })
      this.isSearchPopShow = false
    }
    // 点击搜索建议中歌单的回调
    const clickSuggestMusicList = id => {
      this.$router.push({ name: 'musicListDetail', params: { id } })
      this.isSearchPopShow = false
    }
    // 点击搜索建议中单曲的回调
    const clickSuggestSong = async id => {
      let row = await this.getMusicInfo(id)
      this.isSearchPopShow = false
      // 首先获取当前的歌单列表和歌曲索引
      let musicList = this.$store.state.musicList
      let currentIndex = this.$store.state.currentIndex
      // 先判断该歌曲是否已经在歌单中存在，避免重复点击导致歌单出现相同歌曲
      let isExist = musicList.find(item => item.id == row.id)
      if (isExist) {
        // 如果已经存在 则只提交歌曲id并return出去
        this.$store.commit('updateMusicId', row.id)
        return
      }
      this.$store.commit('changePlayState', false)
      // 将请求到的歌曲详情插入到歌单对应位置并提交至vuex
      musicList.splice(currentIndex + 1, 0, row)
      this.$store.commit('updateMusicId', row.id)
      this.$store.commit('updateMusicList', {
        musicList,
        musicListId: this.$store.state.musicListId
      })
    }

    return {
      ...toRefs(data)
    }
  }
}
</script>

<style scoped>
@import './HeaderBar-element.css';
.hotSearchTitle {
  font-size: 13px;
  margin: 10px 0 5px 20px;
}

.hotSearchItem {
  display: flex;
  align-items: center;
  padding: 6.5px 15px;
  cursor: pointer;
}

.hotSearchItem:hover {
  background-color: #f2f2f2;
}

.hotSearchIndex {
  margin-right: 15px;
  color: #aaa;
}

.topThree {
  color: #e13e3e;
}

.hotSearchWord {
  font-size: 12px;
  color: rgb(51, 51, 51);
}

.hotSearchWordTopThree {
  font-weight: 600;
  color: black;
}

.hotSearchContent {
  font-size: 12px;
  transform: scale(0.9) translateX(-5%);
}

.searchSuggest {
  font-size: 12px;
}

.searchSuggestItemTitle {
  background-color: #f5f5f7;
  padding: 4px 8px;
}

.searchSuggestItemTitle i {
  font-size: 15px;
}

.searchSuggestItem {
  cursor: pointer;
}

.suggestItemDetail {
  padding: 4px 27px;
  font-size: 12px;
}

.suggestItemDetail:hover {
  background-color: #f2f2f2;
}
</style>